import { ArrowRightOutlined } from "@ant-design/icons"
import { StoryObj } from "@storybook/react"
import { Card, Divider, Flex, Typography } from "antd"
import { ReactNode } from "react"

import { NormalInput } from "@/components/common"

const Template = (args: { labelId: string; name: string; precision: number; prefix: ReactNode }) => {
	const { Title, Paragraph, Text } = Typography
	return (
		<Typography>
			<Title level={2}>普通输入框-数字</Title>
			<Paragraph>
				可复用表单数字输入框，如缺省示例&quot;<Text italic>总金额</Text>&quot;, 必须在business组件中封装后导出使用,
				示例封装关键代码如下：
				<Divider />
				<Flex gap={8} align="center">
					<Text
						code
					>{`<NormalInput type="number" precision={${args.precision}} prefix={${args.prefix}} labelId="${args.labelId}" name="${args.name}" />`}</Text>
					<ArrowRightOutlined />
					<Card>
						<NormalInput type="number" {...args} />
					</Card>
				</Flex>
			</Paragraph>
		</Typography>
	)
}

export default {
	title: "普通输入框类型-Number",
	component: Template
}

type Story = StoryObj<typeof Template>

export const BalanceInput: Story = {
	args: {
		labelId: "agent.total_amount",
		name: "totalAmount",
		precision: 2,
		prefix: "$"
	}
}
